<template>
    <ele-upload-video
      :fileSize="2000"
      :responseFn="handleResponse"
      @success="handleUploadSuccess"
      @error="handleUploadError"
      action='/videopath'
      name="video"
      style="margin: 50px"
      v-model="video"
    />
    <h2>下面应该是video</h2>
    <!-- <video src="../../public/video.mp4" controls></video> -->
    <!-- <video v-if="video" :src="video"></video> -->
    <!-- <img :src="videoUrl" alt=""> -->
    <video ref="myVideo" width="640" height="360" controls>
      <source :src="videoUrl" type="video/mp4" />
    </video>
    <button @click="getVideo">get</button>
    <h2>此处video结束</h2> 
</template>
  
<script>
import axios from "axios";
export default {
    name: 'myVideo',
    data () {
      return {
        video: null,
        videoUrl: "",
      }
    },
    mounted(){
      this.getVideo();
    },
    methods: {
    //   submit:function(){
    //   const path = 'http://127.0.0.1:5000/dataentry'
    //   axios.post(path, {
    //     name:this.name,
    //     }
    //   )
    //   .then(response => {
    //     console.log(response);
    //   })
    //   .catch(err =>{
    //     console.log(err);
    //   });
    // },
    async getVideo() {
      const path = '/mypath'
      try{
        const response = await axios.get(path,{responseType: "arraybuffer"});
          console.log(response.data);
          let binaryData = [].concat(response.data);
          let blobFile = new Blob(binaryData);
          // binaryData.push(blob);
          // const blob = new Blob([response.data], { type: "video/mp4" });
          console.log(blobFile);
          const url = URL.createObjectURL(blobFile);
          console.log(url);
          this.videoUrl = url;
      }catch(error){
        console.error(error)
      }
      },
      handleUploadSuccess(){
        if (this.isShowSuccessTip) {
          this.$message.success("上传成功!");
          this.video = 'https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4?id='
        }
      },
      handleUploadError (error) {
        this.$notify.error({
          title: '上传提示',
          message: '测试环境无法上传文件'
        })
        // eslint-disable-next-line no-console
        console.log('error', error)
      },
      handleResponse({ id }) {
        console.log("success")
        return 'https://s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v2_30097df.mp4?id=' + id
      }
    }
  }
</script>